import React from 'react'
import { NavBar } from 'antd-mobile'
import {
  useLocation,
  useNavigate
} from "react-router-dom";
const LayoutHeader = () => {
  const location = useLocation()
  const navigate = useNavigate()

  const [title, setTitle] = React.useState('首页')
  const [back, setBack] = React.useState(true)

  React.useEffect(() => {
    switch (location.pathname) {
      case '/':
        setTitle('首页')
        setBack(false)
        break;
      case '/news':
        setTitle('新闻')
        setBack(false)
        break;
      case '/user':
        setTitle('我的')
        setBack(false)
        break;
      default:
        setBack(true)
        break;
    }
  }, [location])

  return (
    <>
      <NavBar
        style={{
          '--border-bottom': '1px #eee solid',
          position: 'fixed',
          width: '100%',
          background: 'white',
          zIndex: 1,
        }}
        backArrow={back}
        onBack={() => {
          navigate(-1)
        }}
      >{title}</NavBar>
      <div style={{
        height: 45,
      }}></div>
    </>
  )
}

export default LayoutHeader